﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>百度地图</title>
</head>
<body>
    <div id="container"></div>
    <input type="hidden" id ="lngLat" value =""/>
</body>
</html>

<style type="text/css">
    body {
        margin:0;
    }
    #container {
        width: 900px;
        height: 500px;
        margin:0px;
        padding:0px;
    }
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=f17t55QmbRYgyBpIGHNuyyhfX1hi0D5I"></script>
<script type="text/javascript">
    var _lines = new Array();
    var _markers = new Array();
    var _lngLats = new Array();

    var map = new BMap.Map("container");
    map.setZoom(10);
    var point = new BMap.Point(118.781586, 32.042141);
    map.centerAndZoom(point,10);
    map.enableScrollWheelZoom(true);

    var mapClick = function (e) {
        if (_lngLats.length > 0) {
            var lngLat = _lngLats[_lngLats.length-1];
            var points = lngLat.lat + "," + lngLat.lng + ";" + e.point.lat + "," + e.point.lng + ";";
            showLine(points, "#FF0000");
        }
        _lngLats.push(e.point);
        window.external.ShowGetPoint(e.point.lat, e.point.lng);
    }

    // 添加地图点击事件
    function addMapClickEvent() {
        map.addEventListener('click', mapClick);
    }
    
    // 移除地图点击事件
    function removeMapClickEvent() {
        map.removeEventListener('click', mapClick);
    }

    // 显示坐标点
    function showPoint(lat, lng) {
        var point = new BMap.Point(lng, lat);
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        _markers.push(marker);
        map.setCenter(point);
    }

    // 显示折线
    function showLine(points, color) {

        var pointPath = new Array();

        var pointArr = points.split(';');
        for (var i = 0; i < pointArr.length; i++) {
            if (pointArr[i].length == 0) {
                continue;
            }
            var lngLat = pointArr[i].split(',');
            var p = new BMap.Point(lngLat[1], lngLat[0]);
            pointPath.push(p);
        }
        var polyline = new BMap.Polyline(pointPath, {
                strokeColor: color,
                strokeWeight: 2,
                strokeOpacity: 0.5
        });

        map.addOverlay(polyline);
        _lines.push(polyline);
        map.setCenter(pointPath[0]);
    }

    // 轨迹回放
    var replayPoints = new Array();
    var replayHandle = null;
    var replay_i = 0;
    var replayColor = null;
    function replay(points, color) {
      
        //清空
        replayPoints.length = 0;
        replayColor = color;

        //初始化回放坐标点数组
        var pointArr = points.split(';');
        for (var i = 0; i < pointArr.length; i++) {
            if (pointArr[i].length == 0) {
                continue;
            }
            var lngLat = pointArr[i].split(',');
            var p = new BMap.Point(lngLat[1], lngLat[0]); //0维度 1经度
            replayPoints.push(p);
        }

        if (replayPoints.length <= 1) {
            return;
        }
        map.setZoom(18);
        replayHandle = setInterval("replayPath()", 20);
    }

    // 回放轨迹
    function replayPath() {
        if (replay_i + 1 == replayPoints.length) {
            clearInterval(replayHandle);
            replay_i = 0;
            return;
        }

        var pointPath = new Array();
        pointPath.push(replayPoints[replay_i]);
        pointPath.push(replayPoints[replay_i + 1]);

        var polyline = new BMap.Polyline(pointPath, {
            strokeColor: replayColor,
            strokeWeight: 2,
            strokeOpacity: 0.5
        });
        map.addOverlay(polyline);
        _lines.push(polyline);
        map.setCenter(pointPath[1]);
        replay_i++;
    }

    // 开始取点
    function startGetPoint() {
        addMapClickEvent();
    }

    // 停止取点
    function endGetPoint() {
        removeMapClickEvent();
        _lngLats.length = 0;
    }

    // 清理地图
    function clearMap() {

        map.clearOverlays();

        _markers.length = 0;
        _lines.length = 0;
    }
</script>
